<template>
  <div class="fixed_header">
    <div class="header">
      <div class="" @click="goHome('/casino')">
        <img class="logo" :src="main.logo" alt="logo" />
      </div>
      <!-- 已登录状态 -->
      <div v-if="isLogin" class="money" @click="clickWallet()">
        <span class="text min-w-[100px] p-2 rounded-l text-sm bg-[#071824]">
          {{ main2.balance }}
        </span>
        <div
          class="bg-[#1475e1] hover:bg-[#105eb4] text-sm font-semibold text-white rounded-r p-2 cursor-pointer"
        >
          {{ $t("page.navbar.wallet") }}
        </div>
      </div>

      <div v-if="isLogin">
        <div class="right">
          <div class="icon2" v-if="main.showCheckIcon" @click="openCheckLayer">
            <div
              class="icon2 cursor-pointer"
              style="margin-right: 0"
              alt="user"
            >
              <div class="w-[20px] h-[20px] bgc_img"></div>
            </div>
          </div>
          <div class="icon2" ref="navRef" @click="toggleSubMenu">
            <div
              class="icon2 cursor-pointer"
              style="margin-right: 0"
              alt="user"
            >
              <svg-icon class="text-[20px] text-white" name="About us" />
            </div>
            <div
              v-show="showNav"
              class="nav absolute overflow-y-auto right-[10px] mt-8 w-44 bg-[#1a2c38] py-[4px] text-black rounded shadow-lg"
              @click.stop
            >
              <ul class="text-[#9db5d3]">
                <li
                  class="px-4 py-2 flex h-[34px] font-semibold items-center cursor-pointer"
                >
                  Hey: {{ main.user_detail?.user_name }}
                </li>
                <li
                  @click="navClick(item.id)"
                  class="px-4 py-2 nav_hover flex h-[34px] font-semibold items-center cursor-pointer whitespace-nowrap"
                  v-for="(item, index) in menuStore.userMenuData"
                  :key="item.id"
                >
                  <svg-icon
                    class="text-[18px] mr-2 w-1 h-1 text-[#2f4553]"
                    :name="item.name"
                    width="100px"
                    height="100px"
                  />
                  <span class="item-text text-[#9db5d3]">
                    {{ $t(item.lang) }}
                  </span>
                </li>
              </ul>
            </div>
          </div>

          <div
            class="icon2 cursor-pointer mr-[4px]"
            alt="tips"
            @click="openService"
          >
            <svg-icon class="text-[22px] text-white" name="Customer service" />
          </div>

          <div class="icon3 cursor-pointer" alt="tips" @click="clickNotify">
            <svg-icon
              @click="clickNotify"
              class="text-[20px] text-white"
              name="Notify"
            />
          </div>
        </div>
      </div>
      <div class="dflex jsb w100" v-else>
        <div class="btns">
          <div @click="clickLogin" class="icons">
            {{ $t("layer.login.signIn") }}
          </div>
          <div @click="clickRegister" class="icons blue hover:bg-[#105eb4]">
            {{ $t("layer.login.register") }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 登录注册 弹窗 -->
  <!-- <modelpopu
    :modelshow="main.loginLayer"
    ref="popureter"
    @cloeselogin="cloeselogin"
  ></modelpopu> -->
  <!-- 通知 弹窗 -->
  <!-- <notify
    :notifyShow="main.notifyShow"
    ref="notifyRef"
    @notifyClose="notifyClose"
  ></notify> -->
  <!-- 统计 弹窗 -->
  <statistics
    :statisticsShow="statisticsShow"
    ref="statisticsRef"
    @statisticsClose="statisticsClose"
  ></statistics>
  <!-- vip 弹窗 -->
  <vip :vipShow="vipShow" ref="vipRef" @vipClose="vipClose"></vip>

  <checkin @openWallet="clickWallet" />
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUpdate,
  defineAsyncComponent,
  nextTick,
  getCurrentInstance
} from "vue";
import { getBalance } from "../../api/wallet.js";
import { dateTimeZone } from "../../utils/date";
import { userLogout, userVip } from "../../api/user.js";
import { useRouter } from "vue-router";
import { mainAct } from "@/store/activeda";
import { mainWallet } from "@/store/wallet";
import { storeToRefs } from "pinia"; //引入pinia转换
import modelpopu from "../login/modelpopu.vue";
import { eventBus } from "@/utils/eventBus";
import { menu } from "@/store/menu.js";

const menuStore = menu();
const main = mainAct();
const main2 = mainWallet();

const { showPhoneMenu, isLogin } = storeToRefs(main); //响应式
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const router = useRouter();

import { stopScroll, canScroll, param2Obj } from "../../utils/scrollload";
const statistics = defineAsyncComponent(() =>
  import("../layer/statistics.vue")
);
const vip = defineAsyncComponent(() => import("../layer/vip.vue"));
const checkin = defineAsyncComponent(() => import("../layer/checkin.vue"));

const money = ref("30162.60");
//nav
const navRef = ref(null);
const showNav = ref(false);

//login弹窗.
const modelshow = ref(false);
const popureter = ref(null);
import { useDeviceType } from "@/hooks/useDeviceType";
const { isMobile } = useDeviceType();
const clickLogin = () => {
  // stopScroll();
  if (isMobile.value) {
    router.push("/login");
  } else {
    main.showLoginLayer("no");
  }
};
const clickRegister = () => {
  main.getCommonRegisterIsFee();
  main.showRegister();
  // stopScroll();
  // popureter.value.clickrestion();
  // getvcode.value();
};

const cloeselogin = () => {
  main.loginLayer = false;
  canScroll();
};

const openCheckLayer = () => {
  main.checkActLayer = true;
  console.log(main.checkActLayer);
};

//通知弹窗
const notifyShow = ref(false);
const notifyRef = ref(null);
const clickNotify = () => {
  nextTick(() => {
    // console.log("notifyRef.value", notifyRef.value);
    // notifyRef.value.goShow();
    main.showNotify();
  });
  // notifyShow.value = true;
  // main.showPhoneMenu = false;
};
const notifyClose = async () => {
  await nextTick();
  main.notifyClose();
};
//统计弹窗
const statisticsShow = ref(false);
const statisticsRef = ref(null);
const clickStatistics = async () => {
  let res = await userVip();
  if (res.errno == 0) {
    main.vipinfo = res.data;
  }
  console.log("统计弹窗");

  stopScroll();

  statisticsShow.value = true;
};
const statisticsClose = async () => {
  await nextTick();
  statisticsShow.value = false;
  canScroll();
};
const getVipInfo = async () => {
  let res = await userVip();
  if (res.errno == 0) {
    let data = res.data;
    data.created_at = dateTimeZone(
      res.data.created_at,
      "{y}-{m}-{d} {h}:{i}:{s}",
      main.timeZone
    );
    main.vipinfo = data;
  }
};
//vip弹窗
const vipShow = ref(false);
const vipRef = ref(null);
const clickVip = () => {
  stopScroll();
  getVipInfo();
  vipShow.value = true;
};
const vipClose = async () => {
  await nextTick();
  vipShow.value = false;
  canScroll();
};
//wallet弹窗
const walletShow = ref(false);
const walletRef = ref(null);
const clickWallet = async () => {
  main2.getBankInfo("showRecharge");
  // main2.showRecharge = true;
  // await main2.getBalanceNumll();
  // stopScroll();
  // walletShow.value = true;
};
const walletClose = async () => {
  await nextTick();
  walletShow.value = false;
  canScroll();
};

onMounted(() => {
  // main.gethallIntro();
  //点击页面其它地方关闭nav
  document.addEventListener("click", e => {
    if (navRef.value) {
      let isSelf = navRef.value.contains(e.target);
      if (!isSelf) {
        showNav.value = false;
      }
    }
  });
});
onBeforeUpdate(() => {
  //页面销毁前移除点击事件
  window.removeEventListener("click", () => {});
});

const toggleSubMenu = () => {
  showNav.value = !showNav.value;
};

const goHome = paht => {
  // main.scrollable.scrollTop = 0;
  eventBus.emit("reset");
  router.replace("/casino");
};

const navClick = e => {
  showNav.value = false;
  // navLink.value.forEach(item => {
  //   item.active = false;
  // });
  // e.active = true;

  switch (e) {
    case "1":
      console.log(1);
      clickWallet();
      break;
    case "2":
      console.log(2);
      router.push("/tsaHistory");
      break;
    case "3":
      clickVip();
      console.log(3);
      break;
    case "4":
      router.push("/programe");
      console.log(4);
      break;
    case "5":
      getVipInfo();
      clickStatistics();
      console.log(5);
      break;
    case "6":
      router.push("/myBet");
      console.log(6);
      break;
    case "7":
      // main2.showBank = true;
      main2.getBankInfo("showBank");
      break;
    case "8":
      router.push("/aboutus");
      console.log(8);
      break;
    case "9":
      logout();
      break;
    case "10":
      router.push("setting");
      break;
    default:
      break;
  }
};
const logout = async () => {
  console.log("登出");

  let res = await userLogout();

  if (res.errno == 0) {
    main.isLogin = false;
    router.push("/casino");
    let lang = localStorage.getItem("lang");
    const user_detail = JSON.parse(localStorage.getItem("tourist_user_detail"));
    setTimeout(() => {
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("vipinfo");
      localStorage.clear();
      localStorage.setItem("tourist_user_detail", JSON.stringify(user_detail));
      localStorage.setItem("lang", lang);
      window.location.reload();
    }, 200);
  } else {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: res.msg,
      type: "error"
    });
    setTimeout(() => {
      main.isLogin = false;
      sessionStorage.clear();
      location.reload();
    }, 2000);
  }
};

const openService = () => {
  window.open(main.customerService, "Service");
};
</script>

<style lang="less" scoped>
.header {
  // position: fixed;
  /*width: calc(100% - 2.4rem);*/
  width: 100%; /* 设置宽度为 auto */
  max-width: 1200px; /* 设置最大宽度 */
  margin: auto; /* 水平居中 */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // z-index: 1001;
  .logo {
    width: auto;
    display: none;
    height: 36px;
    color: #fff;
    cursor: pointer;
  }
  .logo2 {
    width: auto;
    height: 24px;
    color: #fff;
    cursor: pointer;
    display: none;
  }
  .dflex {
    display: flex;
    align-items: center;
  }
  .jsb {
    justify-content: space-between;
  }
  .w100 {
    width: 100%;
  }

  .money {
    /* // width: 11rem; */
    height: 2rem;
    /* // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%); */
    text-align: center;
    line-height: 2rem;
    display: flex;
    align-items: center;
    .bg {
      width: 11rem;
      height: 2rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10000;
    }
    .text {
      font-size: 0.9rem;
      color: #fff;
      /* //position: absolute;
      //top: 50%;
      //left: 50%;
      //transform: translate(-50%, -50%); */
      /* z-index: 1001; */
    }
    .rf {
      width: 1.6rem;
      height: 1.4rem;
      position: absolute;
      right: 0.4rem;
      top: 0.2rem;
      z-index: 10001;
    }
  }
  .right {
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: auto;
    .icon1 {
      width: 1.9rem;
      height: 1.9rem;
      margin-right: 1.8rem;
    }
    .icon2 {
      /* // width: 1.9rem;
      // height: 1.9rem; */
      margin-right: 1.8rem;
      position: relative;
    }
    .icon3 {
      /* // width: 1.9rem;
      // height: 1.9rem; */
    }
    .nav {
      /*width: 7.6rem;
      height: 19.3rem;
      position: absolute;
      background: url("../../assets/home/nav-bg.png") no-repeat center;
      background-size: 100% 100%;
      bottom: -19.5rem;
      left: -3rem;*/
      z-index: 10003;
      .mt-7 {
        margin-top: 0.7rem !important;
      }
      .h-23 {
        height: 2.3rem;
      }
      .nav-item:first-child {
        margin-top: 0.7rem !important;
      }
      .nav-item:last-child .bottom-line {
        display: none;
      }
      .active-text {
        color: #ffee76 !important;
      }
      .active-bg {
        width: 7.1rem;
        height: 2.3rem;
        background: url("../../assets/home/nav-active-bg.png") no-repeat center !important;
        background-size: 100% 100%;
      }
      .nav-item {
        width: 7.1rem;
        height: 2.3rem;
        margin: auto;
        line-height: 2.3rem;

        .item-icon {
          margin: 0.6rem;
          width: 1.5rem;
          height: 1.5rem;
        }
        .item-text {
          font-size: 0.8rem;
          color: #2f4553;
          width: 4.4rem;
          text-align: center;
          line-height: 1;
        }
        .bottom-line {
          width: 7rem;
          height: 0.1rem;
          margin: auto;
          background-color: #7d102f;
        }
      }
    }
  }
  .btns {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
    .icons {
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      padding: 11.5px 20px;
      color: #fff;
      border-radius: 4px;
    }
    .blue {
      background-color: #1475e1;
    }
  }
  .btns .blue:hover {
    background-color: #105eb4 !important;
  }
  .download {
    width: 3rem;
    height: 3rem;
    margin-right: 1.2rem;
  }
}

@media only screen and (max-width: 600px) {
  .header {
    padding: 0 8px !important;
  }
  .icon2 {
    margin-right: 4px !important;
  }
  .logo {
    display: block !important;
  }
  .logo2 {
    display: block !important;
  }
}

.bgc_img {
  background: url("../../assets/VIP/vip.png") no-repeat;
  background-size: 100% 100%;
}

.nav_hover:hover {
  color: #2f4553;
  background: #2f4553;
}

.fixed_header {
  height: 60px;
  background-color: #1a2c38;
  box-shadow:
    #0003 0 4px 6px -1px,
    #0000001f 0 2px 4px -1px;
}

@media only screen and (min-width: 600px) {
  .fixed_header {
    // width: 100%;
    // width: calc(100% - 13.4rem);
    position: sticky;
    z-index: 100;
    display: flex; /* 设置为 Flex 容器 */
    justify-content: center; /* 主轴居中 */
    align-items: center;
  }
}
</style>
